<template>
    <el-form ref="regForm" :model="regForm">
        <h1>{{ regForm.title }}</h1>
        <!-- <el-form-item label="活动名称">
            <el-input v-model="regForm.title"></el-input>
        </el-form-item> -->
        <p>{{ regForm.info }}</p>
        <el-card class="box-card form-card">
            <el-form-item 
                v-for="(formObj, index) in regForm.reginfo"
                :key="formObj.key"
                :label="formObj.title"
                :prop="'reginfo.' + index + '.result'"                                                                                        
                :rules="{
                    required: true, message: '项目名不能为空', trigger: 'blur'                                
                }"
                >
                <el-input v-if="formObj.type==='文本项'" v-model="formObj.result"></el-input>
                
                <el-radio-group v-if="formObj.type==='单选项'" v-model="formObj.result">
                    <el-radio
                        v-for="option in formObj.options"
                        :key="option.key"
                        :label="option.value"
                        :rules="{
                            required: true, message: '项目名不能为空', trigger: 'blur'
                        }"
                    ></el-radio>
                </el-radio-group>

                <el-checkbox-group v-if="formObj.type==='多选项'" v-model="formObj.result">
                    <el-checkbox
                        v-for="option in formObj.options"
                        :key="option.key"
                        type="results"
                        :label="option.value"
                        :rules="{
                            required: true, message: '项目名不能为空', trigger: 'blur'
                        }"
                    ></el-checkbox>
                </el-checkbox-group>

            </el-form-item>
            
        </el-card> 
        <el-form-item>
            <el-button class="submit-form-button" type="primary" @click="onSubmit('regForm')">提交</el-button>
            <!-- <el-button>取消</el-button> -->
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            regForm: {
                "type": [],
                "tid": "",
                "title": "",
                "info": "",            
                "reginfo": [

                ]
            }
        }
    },
    mounted() {
        this.getTableData();
    },
    methods: {
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post(this.customConfig.apiServerUrl + this.customConfig.apiPrefix + "/result/" , {
                        "result": {
                            "tableId": this.$route.params.tableId,
                            "regForm": this.regForm
                        }
                    })
                    .then(function (response) {
                        console.log(response.data);
                        console.log(response.data.result.tableId);
                        window.location.href='/table/'+response.data.result.tableId + "/fillresult";
                    })
                    .catch(function (error) {
                        console.log(error);
                        alert(error);
                    });
                    
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        getTableData() {
            let _this = this;
            this.$http.get(this.customConfig.apiServerUrl + this.customConfig.apiPrefix + "/table/" + this.$route.params.tableId )
            .then(function (response) {
                // console.log(response.data.table);
                let reginfo = response.data.table.struct;
                reginfo.forEach(item => {
                    if (item.type=="多选项") {
                        item.result = [];
                        
                    }
                });
                _this.regForm = {
                    "tid": _this.$route.params.tableId,
                    "title": response.data.table.title,
                    "info": response.data.table.info,            
                    "reginfo": reginfo
                }
                
                // window.location.href='/table/'+response.data.table.id;
            })
            .catch(function (error) {
                console.log(error);
                // alert(error);
                window.location.href='/';
            });
        }
    }
}
</script>

<style lang="less" scoped>
    .form-card {
        margin-bottom: 24px;
    }
    .submit-form-button {
        // margin-top: 8px;
    }

</style>
